<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{leftFn}}</strong></span>
    <ul class="filters">
      <li>
        <!-- $emit('父组件中的函数 '，自定义变量    no和yes在这里是自定义的) -->
        <!-- selected:true -->
        <a @click='$emit("changeType","all")'  :class='{selected:type==="all"}'      href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click='$emit("changeType","no")' :class='{selected:type==="no"}' href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click='$emit("changeType","yes")'  :class='{selected:type==="yes"}' href="javascript:;" >已完成</a>
      </li>
    </ul>
    <!-- 不需要传id -->
    <button class="clear-completed" @click='$emit("clear")'>清除已完成</button>
  </footer>
</template>

<script>
export default {
  //接收
  props:{
    list:{
      type:Array,
      required:true
    },
    type:String

  },
  data(){
    return{

    }
  },
  //1.剩余数量值完成 计数  留下false
  computed:{
    leftFn(){
     return this.list.filter(item=>!item.isDone ).length

    }
  }


}
</script>